<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>

		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button id="sort">从小到大</button>
		<button id="getAll">全选</button>
		<button id="change">反选</button>
		<button id="sortByseri">按序列号从大到小</button>

		<table border="1" cellspacing="0" cellpadding="10" id="tb1" id="box1">
			<tr>
				<th>序列号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>操作</th>
				<th>选择</th>
			</tr>
		</table>

		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var info = [{
					name: "胡杭",
					age: 16
				},
				{
					name: "胜明",
					age: 22
				},
				{
					name: "军毅",
					age: 21
				},
				{
					name: "晓华",
					age: 13
				},
				{
					name: "盛聪",
					age: 23
				},
				{
					name: "侦剑",
					age: 32
				},
				{
					name: "红翔",
					age: 25
				},
				{
					name: "超维",
					age: 18
				},
				{
					name: "士琪",
					age: 22
				},
				{
					name: "艳华",
					age: 20
				}
			];
			var i = 0,
				add_btn = $(".add"),
				tbody = $("tbody");

			//点击增加
			add_btn.on("click", function() {
				tbody.append("<tr><td>" + i + "</td>" + "<td>" + info[i].name + "</td>" + "<td>" + info[i].age + "</td>" + "<td><button class='delt'>删除</button></td><td><input type='checkbox' class='tbinp'></td></tr>");
				i++;
			})

			//事件代理 删除一行
			var vTable = $('table');
			vTable.bind("click", function(ev) {　　　　
				var obj = $(ev.target)　　　
				console.log(obj.get(0).tagName)　
				if(obj.get(0).tagName == 'BUTTON') {　
					obj.parent().parent().remove();　　　　　
				}　　
			})

			//删除选中
			var delall = $('.del');
			delall.on("click", function delAll() {
				vInput = $("input");
				vInput.each(function(j) {
					if(vInput.eq(j).is(":checked")) {
						vInput.eq(j).parent().parent().remove();
					}
				})
			})

			//排序

			var vBtn = $('#sort');
			vBtn.on("click", function() {
				var oTab = $('table');
				var arr = [];

				oTab.children().children().each(function(i) {
					arr[i] = oTab.children().children().eq(i);
				})
				arr.sort(function(tr1, tr2) {
					var n1 = parseInt(tr1.children().eq(2).html());
					var n2 = parseInt(tr2.children().eq(2).html());
					return n1 - n2;
				})
				$(arr).each(function(i) {
					oTab.children().eq(0).append(arr[i])
				})
			})

			//全选
			var getAll_button = $('#getAll');
			getAll_button.on("click", function() {
				var arr = $("input");
				$(arr).each(function(i) {
					arr[i].checked = true;
				})
			})

			//反选
			var change_btn = $('#change');
			change_btn.on("click", function() {
				var arr = $("input");
				$(arr).each(function(i) {
					if(arr[i].checked) {
						arr[i].checked = false;
					} else {
						arr[i].checked = true;
					}
				})
			})

			//按序列号排序
			var sortByseri = $('#sortByseri');
			sortByseri.on("click", function() {
				var oTab = $('table');
				var arr = [];
				var trs = $('table tr');
				trs.each(function(i) {
					arr[i] = trs.eq(i);
				})

				arr.sort(function(tr1, tr2) {
					var n1 = parseInt(tr1.children().eq(0).html());
					var n2 = parseInt(tr2.children().eq(0).html());
					return n2 - n1;
				})
				$(arr).each(function(i) {
					oTab.children().eq(0).append(arr[i])
				})

			})

			//选中高亮
			var body = $('body');
			body.on("click", function(ev) {　
				var vInput = $('input');
				var ev = ev || window.event;　　　　
				var vtarget = ev.target || ev.srcElement;
				if(vtarget.nodeName.toLowerCase() == 'input' || vtarget.nodeName.toLowerCase() == 'button') {
					for(var i = 0; i <= vInput.length; i++) {
						if(vInput.eq(i).is(":checked")) {
							vInput.eq(i).parent().parent().css("background-color", "skyblue");
						} else {
							vInput.eq(i).parent().parent().css("background-color", "");
						}
					}
				}

			})

			//			// 尝试拖动功能
			//
			//			function DragDrop(id) {
			//				this.Box = document.getElementById(id);
			//				this.tbody = this.Box.querySelector('tbody');
			//				this.tr = this.Box.querySelectorAll('tr');
			//				this.aPosXY = []; //原始位置
			//				this.aPosXYClone = [];
			//				this.moveStatus = false; //移动状态
			//				this.editAble = false; //编辑状态
			//				this.addBox = null;
			//				this.moveItem = null;
			//				this.moveItemH = null;
			//				this.mouseDownPos = [];
			//				this.inScope = false;
			//
			//			}
			//
			//			DragDrop.prototype.init = function() {
			//				var that = this;
			//				// 获取高度
			//				this.tbody.style.height = this.tr.length * (this.tr[0].offsetHeight + parseInt(document.defaultView.getComputedStyle(this.tr[0]).marginBottom)) + 'px';
			//
			//				for(var i = 0; i < this.tr.length; i++) {
			//					var pos = [];
			//					var posX = this.tr[i].offsetLeft; // 获取当前元素相对父级元素的偏移量x
			//					var posY = this.tr[i].offsetTop; //获取当前元素相对父级元素的偏移量y
			//					pos.x = posX + 'px';
			//					pos.y = posY + 'px';
			//					this.aPosXY.push(pos);
			//					this.tr[i].setAttribute('data-index', i)
			//				}
			//				//  变为绝对定位
			//				for(var i in this.aPosXY) {
			//					this.tr[i].style.position = "absolute";
			//					this.tr[i].style.left = this.aPosXY[i].x;
			//					this.tr[i].style.top = this.aPosXY[i].y;
			//				}
			//
			//				for(var i = 0; i < this.tr.length; i++) {
			//					this.tr[i].onmousedown = function(event, t) {
			//						that.mouseDown(event, this);
			//					}
			//					this.tr[i].onmouseup = function() {
			//						that.moveStatus = false; //关闭可移动状态
			//						that.mouseUp(that.moveItem);
			//					}
			//				}
			//				window.onmousemove = function(event) {
			//					if(that.moveStatus) {
			//						that.mouseMove(event, that.moveItem);
			//					}
			//				}
			//			}
			//
			//			//鼠标按下
			//			DragDrop.prototype.mouseDown = function(e, t) {
			//				var thisIndex = t.getAttribute('data-index');
			//				//获取当前序号
			//				this.addBox = document.createElement('div'); // 创建新元素用于存放
			//				var tWidth = t.offsetWidth + 'px';
			//				var tHeight = t.offsetHeight + 'px';
			//				this.addBox.style.width = tWidth;
			//				this.addBox.style.height = tHeight;
			//				this.addBox.style.left = this.aPosXY[thisIndex].x;
			//				this.addBox.style.top = this.aPosXY[thisIndex].y;
			//				this.tbody.appendChild(this.addBox);
			//				this.moveStatus = true;
			//				this.moveItem = t; //当前移动的元素
			//				this.mouseDownPos.x = e.pageX - this.tbody.offsetLeft;
			//				this.mouseDownPos.y = e.pageY - this.tbody.offsetTop;
			//				t.style.zIndex = 100;
			//				t.classList.add("move-item");
			//				this.aPosXYClone.splice(0, this.aPosXYClone.length);
			//				for(var i = 0; i < this.aPosXY.length; i++) { //复制数组
			//					this.aPosXYClone.push(this.aPosXY[i]);
			//				}
			//				t.classList.remove('edit-able');
			//				console.log(this.mouseDownPos);
			//			}
			//
			//			//鼠标移动
			//			DragDrop.prototype.mouseMove = function(e, obj) {
			//				var mousetolistX = e.pageX - this.tbody.offsetLeft; //鼠标相对ul的位置 x
			//				var mousetotbodyY = e.pageY - this.tbody.offsetTop; //鼠标相对ul的位置 y
			//				var objIndex = obj.getAttribute('data-index'); // 获取当前选中元素的下标
			//				var objLeft = this.aPosXY[objIndex].x;
			//				var objTop = this.aPosXY[objIndex].y; //根据下标获取当前选中元素 固定的时候的定位 x,y;
			//				var relativeObjX = this.mouseDownPos.x - parseInt(objLeft); //鼠标按下时鼠标相对于选中元素的位置x
			//				var relativeObjY = this.mouseDownPos.y - parseInt(objTop); //鼠标按下时鼠标相对于选中元素的位置y
			//				var objMoveX = mousetolistX - relativeObjX;
			//				var objMoveY = mousetolistY - relativeObjY;
			//
			//				obj.style.left = objMoveX + 'px';
			//				obj.style.top = objMoveY + 'px';
			//
			//				for(var i = 0; i < this.aPosXYClone.length; i++) {
			//					if(!(i == objIndex)) {
			//						if(objMoveY + obj.offsetHeight >= parseInt(this.aPosXYClone[i].y) + this.tr[i].offsetHeight / 2 && objMoveY + obj.offsetHeight < parseInt(this.aPosXYClone[i].y) + this.tr[i].offsetHeight || objMoveY >= parseInt(this.aPosXYClone[i].y) && objMoveY < parseInt(this.aPosXYClone[i].y) + this.tr[i].offsetHeight / 2) {
			//
			//							var ts = [];
			//							ts.x = this.addBox.style.left;
			//							ts.y = this.addBox.style.top;
			//							this.aPosXYClone[objIndex] = this.aPosXYClone[i];
			//							this.aPosXYClone[i] = ts;
			//							this.addBox.style.left = this.aPosXYClone[objIndex].x;
			//							this.addBox.style.top = this.aPosXYClone[objIndex].y;
			//							this.tr[i].style.left = ts.x;
			//							this.tr[i].style.top = ts.y;
			//
			//							return false;
			//						}
			//					}
			//				}
			//
			//			}
			//
			//			//鼠标弹起
			//			DragDrop.prototype.mouseUp = function(t) {
			//				if(this.moveItem) {
			//					this.tbody.removeChild(this.addBox)
			//					this.moveItem.style.zIndex = null;
			//					t.classList.remove('move-item');
			//					this.aPosXY.splice(0, this.aPosXY.length);;
			//					for(var i = 0; i < this.aPosXYClone.length; i++) { //复制数组
			//						this.aPosXY.push(this.aPosXYClone[i]);
			//					}
			//					t.classList.add('edit-able');
			//					for(var i in this.aPosXY) {
			//						this.tr[i].style.position = 'absolute';
			//						this.tr[i].style.left = this.aPosXY[i].x;
			//						this.tr[i].style.top = this.aPosXY[i].y;
			//
			//					}
			//					this.moveItem = null;
			//				}
			//			}
			//
			//			var box1 = new DragDrop('box1');
			//			box1.init();
		</script>
	</body>

</html>